<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list"  ref="formInline" >
					<el-form-item label="ip地址" prop="ipAddress">
						<el-input v-model="formInline.ipAddress" placeholder="ip地址" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>
					<el-form-item label="主机名称" prop="hostName">
						<el-input v-model="formInline.hostName" placeholder="主机名称" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>
					<el-form-item label="设备类型" prop="equipmentType">
						<!-- 	<el-select v-model="formInline.equipmentType" autocomplete="off">
							<el-option label="服务器" value="0"></el-option>
							<el-option label="交换机" value="1"></el-option>
						</el-select> -->
						<el-select v-model="formInline.equipmentType" autocomplete="off">
							<el-option v-for="key in Object.keys(equipmentypeoptions)" :key="key" :label="equipmentypeoptions[key]" :value="key"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="机房" prop="idcid">
						<el-select v-model="formInline.idcid" placeholder="请选择">
							<el-option v-for="item in idcoptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch(1)">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="resetForm('formInline')">重置</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="createdata">新增</el-button>
				</el-form>
			</el-header>
			<el-main>
				<el-table :data="tableData" :row-class-name="tableRowClassName">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="系统版本">
									<span>{{ props.row.operationSystemVersion }}</span>
								</el-form-item>
								<el-form-item label="硬盘">
									<div>{{ props.row.disk }}</div>
								</el-form-item>
								<el-form-item label="cpu">
									<span>{{ props.row.cpu }}</span>
								</el-form-item>
								<el-form-item label="内存">
									<span>{{ props.row.memory }}</span>
								</el-form-item>

								<el-form-item label="设备类型">
									<!-- 	<el-select v-model="props.row.equipmentTypename" autocomplete="off" disabled=true>
										<el-option label="props.row.equipmentTypename" value="0"></el-option>
										<el-option label="路由器" value="1"></el-option>
									</el-select> -->
									<span>{{ props.row.equipmentTypename }}</span>

								</el-form-item>
								<el-form-item label="型号">
									<span>{{ props.row.equipmentModel }}</span>
								</el-form-item>

							</el-form>
						</template>
					</el-table-column>

					<el-table-column prop="id" label="序号" width="80">
					</el-table-column>
					<el-table-column prop="hostname" label="主机名称" width="220">
					</el-table-column>
					<el-table-column prop="cmdbIpaddressList" label="ip地址" :formatter="formatipaddresslist" width="150">

					</el-table-column>
					<el-table-column prop="serialnumber" label="序列号" width="100">
					</el-table-column>
					<el-table-column prop="operationsystemtypename" label="系统类型" width="100">
					</el-table-column>
					<el-table-column prop="operationSystemVersion" label="系统版本" width="120">
					</el-table-column>
					<el-table-column prop="remotePort" label="管理端口" width="80">
					</el-table-column>
					<el-table-column prop="idcId" label="所属机房" :formatter="formatidclist" width="150">
					</el-table-column>
					<el-table-column prop="cabinetName" label="所属机柜" width="100">
					</el-table-column>
					<el-table-column prop="description" label="描述" width="100">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="formatstatus" width="100">
					</el-table-column>
					<el-table-column label="操 作" width="300">
						<template slot-scope="scope">
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>

			</el-main>
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="dialogform">
					<el-form-item label="主机名称" :label-width="formLabelWidth" prop="hostname">
						<el-input v-model="dialogform.hostname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="ip地址" :label-width="formLabelWidth">
						<el-transfer v-model="dialogform.cmdbIpaddressList" :data="ipAddressData" :titles="['可选IP','已选IP']" filterable
						 filter-placeholder="请输入IP">
							<el-button class="transfer-footer" slot="left-footer" size="small" @click="ipEditVisiable=true">新增IP地址</el-button>
							<el-button class="transfer-footer" slot="right-footer" size="small" v-show="false"></el-button>
						</el-transfer>
					</el-form-item>
					<el-form-item label="序列号" :label-width="formLabelWidth" v-if="dialogform.id">
						<el-input v-model="dialogform.serialnumber" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="设备类型" :label-width="formLabelWidth">
						<el-select v-model="dialogform.equipmentType" autocomplete="off">
							<el-option v-for="key in Object.keys(equipmentypeoptions)" :key="key" :label="equipmentypeoptions[key]" :value="key"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item v-if="dialogform.equipmentType==1" label="宿主机">
						<el-select v-model="dialogform.sourceHost" filterable placeholder="请选择">
							<el-option v-for="quipmentinfo in equipmentinfooptions" :key="quipmentinfo.value" :label="quipmentinfo.label"
							 :value="quipmentinfo.label"></el-option>

						</el-select>
					</el-form-item>
					<el-form-item label="系统类型" :label-width="formLabelWidth">
						<el-select v-model="dialogform.operationSystemtype">
							<el-option v-for="key in Object.keys(operationsystemTypeoptions)" :key="key" :label="operationsystemTypeoptions[key]"
							 :value="key"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="系统版本" :label-width="formLabelWidth" v-if="dialogform.id">
						<el-input v-model="dialogform.operationSystemVersion" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="管理端口" :label-width="formLabelWidth">
						<el-input v-model="dialogform.remotePort" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="cpu" :label-width="formLabelWidth" v-if="dialogform.id">
						<el-input v-model="dialogform.cpu" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="内存" :label-width="formLabelWidth" v-if="dialogform.id">
						<el-input v-model="dialogform.memory" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="所属机房" :label-width="formLabelWidth" prop="idcid">
						<el-select v-model="dialogform.idcId" placeholder="请选择" @change="changeIdc">
							<el-option v-for="item in idcoptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属机柜" :label-width="formLabelWidth" v-if="this.dialogform.idcId" prop="cabinetid">
						<el-select v-model="dialogform.cabinetId" placeholder="请选择" @focus="focus">
							<el-option v-for="item in cabinetoptions" :key="item.id" :label="item.cabinetNum" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="描述" :label-width="formLabelWidth">
						<el-input v-model="dialogform.description" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-container>
		<ip-address-edit :dialogFormVisible.sync="ipEditVisiable"></ip-address-edit>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import {
		mapGetters
	} from 'vuex';
	import {
		list,
		update,
		del,
		search
	} from '@/api/equipment';
	import {
		Message,
		MessageBox
	} from 'element-ui';
	import ipAddressEdit from './IpAddressEdit'
	import {
		listCabinetByIdc,
		listCabinet,
	} from '@/api/cabinet'
	export default {
		data() {


			return {
				title: '设备信息',
				tableData: [],
				input10: 0,
				formInline: {
					ipAddress: '',
					hostName: '',
					equipmentType: ''
				},
				dialogform: {
					region: '',
					status: '',
					id: '',
					idcId: '',
					cabinetId: '',
					hostname: '',
					// 从穿梭框获取到的选定ip地址的key数组
					cmdbIpaddressList: [],
					remotePort: '',
					equipmentType: '',
					operationSystemtype: '',
					equipmentTypename: '',

				},
				dialogFormVisible: false,
				formLabelWidth: "20",
				count: 0,
				currentPage: 1,
				pageSize: 10,
				ipEditVisiable: false,
				rules: {

				},
				listCabinet: [],
			}
		},
		watch: {
			dialogFormVisible: function() {
				console.log("this.dialogFormVisible: " + this.dialogFormVisible);
				if (this.dialogFormVisible == false) {
					this.dialogform = {};
				} else {

					if (this.ipAddressData.length == 0) {

					}
				}
			}
		},
		created() {

			this.initData(this.currentPage, this.pageSize);
			// 			this.$store.dispatch('setIdcOptions');
			// 			this.$store.dispatch('setEquipmentOptions');
			// 			this.$store.dispatch('setoperationsystemTypeOptions');
			// 			this.$store.dispatch('setipaddresslistOptions');
			// 			this.$store.dispatch('setcabinetOptions');
			// 获取全部ip地址


		},
		computed: {
			...mapGetters({
				idcoptions: 'getIdcOptions',
				cabinetoptions: 'getcabinetOptions',
				equipmentypeoptions: 'getEquipmentOptions',
				operationsystemTypeoptions: 'getoperationsystemTypeOptions',
				ipaddresslistoptions: 'getipaddresslistOptions',
				equipmentinfooptions: 'getEquipmentInfoOPtions',
			}),
			// 获取到的ip地址，用于穿梭框显示ip
			ipAddressData: {
				get: function() {
					console.log("this.ipaddresslistoptions222: " + this.ipaddresslistoptions);
					return this.initiplistoptions()
				}
			}

		},
		methods: {
			initiplistoptions() {
				const data = [];
				console.log("this.ipaddresslistoptions2333: " + this.ipaddresslistoptions);
				if (!this.ipaddresslistoptions || typeof(this.ipaddresslistoptions) == 'undefined') {
					return data;
				}
				this.ipaddresslistoptions.forEach((ipaddress) => {
					data.push({
						key: ipaddress.value,
						label: ipaddress.label,
						ipfilter: ipaddress.label
					});
				})

				return data;
			},

			async initData(currentPage, pageSize) {
				await list(currentPage, pageSize)
					.then((response) => {
						this.inittable(response)
					})
			},
			async onSearch(currentPage) {
				if (currentPage) {
					this.currentPage = currentPage;
				}
				await search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
				if (this.tableData) {
					this.tableData.forEach(item => {
						item.equipmentTypename = this.equipmentypeoptions[item.equipmentType]
						item.operationsystemtypename = this.operationsystemTypeoptions[item.operationSystemtype]

						if (item.cmdbIpaddressList) {
							const ipList = [];
							item.cmdbIpaddressList.forEach(ipaddress => {
								let data = {
									key: ipaddress.id,
									label: ipaddress.ipaddress,
									ipaddresstype: ipaddress.ipaddresstype
								}
								ipList.push(data)
							})
							item.cmdbIpaddressList = ipList
						}

						if (this.cabinetoptions) {
							this.cabinetoptions.some(cabinetItem => {
								if (cabinetItem.id == item.cabinetId) {
									item.cabinetName = cabinetItem.cabinetNum
									return true;
								}
							})
						}

					})
					this.count = response.totalNum;
				}

			},

			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			createdata() {
				this.dialogform.status = "0";
				this.dialogFormVisible = true
			},
			handleEdit(index, row) {
				this.dialogform = Object.assign({}, row);
				const data = [];
				if (row.cmdbIpaddressList) {
					row.cmdbIpaddressList.forEach(ipaddress => {
						data.push(ipaddress.key);
					})
				}
				this.dialogform.cmdbIpaddressList = data;
				this.dialogFormVisible = true

			},
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});

							this.initData(this.currentPage, this.pageSize)
							this.$store.dispatch('setEquipmentInfoOptions');
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			formatstatus(row, column, cellValue, index) {
				if (cellValue == 0) {
					return '使用中';
				}
				return '下架';
			},
			formatipaddresslist(row, column, cellValue = [], index) {
				let ipaddressList = ''
				if (!cellValue) {
					return ""
				}
				cellValue.forEach((ipaddressinfo) => {
					if (ipaddressinfo.ipaddresstype == 0) {
						ipaddressList = ipaddressList + "公网" + ipaddressinfo.label + "\n"
					} else {
						ipaddressList = ipaddressList + "内网" + ipaddressinfo.label + "\n"
					}

				});
				return ipaddressList;
			},
			formatidclist(row, column, cellValue, index) {
				let idcname = ''
				this.idcoptions.some((idcinfo) => {
					if (idcinfo.value == cellValue) {
						idcname = idcinfo.label;
						return true;
					}
				});

				return idcname;
			},
			dialogFormsubmit() {
				const ipaddressTotal = [];
				if (this.dialogform.cmdbIpaddressList) {
					this.dialogform.cmdbIpaddressList.forEach(ipaddress => {
						let data = {
							id: ipaddress
						}
						ipaddressTotal.push(data)
					})
					this.dialogform.cmdbIpaddressList = ipaddressTotal
				}
				update(this.dialogform)
					.then((response) => {
						this.dialogFormVisible = false;
						this.dialogform = {};
						this.initData(this.currentPage, this.pageSize);
						this.$store.dispatch('setEquipmentInfoOptions');
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			// 			filterMethod(query, item) {
			// 				if(query){
			// 					return item.ipfilter.indexOf(query) > -1;
			// 				}
			// 				return item
			// 				
			// 			},
			focus() {
				if (typeof this.dialogform.idcId == "undefined" || this.dialogform.idcId == null ||
					this.dialogform.idcId == "") {
					Message({
						message: "请先选择机房",
						type: 'error',
						duration: 5 * 1000
					})
				} else {
					this.$store.dispatch('setcabinetOptions', this.dialogform.idcId)
				}
			},
			changeIdc() {
				console.log("this.dialogform.cabinetId: " + this.dialogform.cabinetId);
				// this.dialogform.cabinetId = '';
				this.$set(this.dialogform, 'cabinetId', '');
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		components: {
			headTop,
			ipAddressEdit

		},
	};
</script>

<style>
	.el-table .cell {
		white-space: pre-line !important;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
